<template>
  <div class="tab">
    <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" @tab-click="switchTab">
      <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
          :index="index"
          :closable="item.closable">
        <!-- 连接管理页面 -->
        <data-source-manager v-if="item.name === '1'" :addManageTab="addManageTab"></data-source-manager>
        <!-- 连接操作页面 -->
        <data-source-operate v-if="item.name !== '1'" :connectionItem="selectConnectionItem"></data-source-operate>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DataSourceManager from "@/views/connection-manager/ConnectionManager.vue";
import DataSourceOperate from "@/views/data-generate/ConnectionOperate.vue";

export default {
  name: "TabPane",
  components: {
    DataSourceManager: DataSourceManager,
    DataSourceOperate: DataSourceOperate,
  },
  data() {
    return {
      editableTabsValue: '1',
      editableTabs: [{
        title: '数据源管理',
        name: '1',
        closable: false,
        connectionItem: null,
      }],
      tabIndex: 1,
      activeName: 1,
      selectConnectionItem: null,
    }
  },
  methods: {
    /**
     * 添加选项卡
     */
    addManageTab(connectionItem) {
      // console.log(connectionItem);
      let newTabName = ++this.tabIndex + '';
      this.editableTabs.push({
        title: 'SQL ' + connectionItem.name + ' ',
        name: newTabName,
        closable: true,
        connectionItem: connectionItem,
      });
      this.activeName = newTabName;
      this.editableTabsValue = newTabName;
      this.selectConnectionItem = connectionItem;
    },
    // 移除选项卡
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      let selectItem = null;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
              selectItem = nextTab.connectionItem;
            }
          }
        });
      }
      this.activeName = activeName;
      this.editableTabsValue = activeName;
      this.selectConnectionItem = selectItem;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },

    //切换选项卡
    switchTab(tab) {
      // 更改当前选中的选项卡
      // this.activeName = tab.name;
      this.selectConnectionItem = tab.connectionItem;
      let tabs = this.editableTabs;
      tabs.forEach((tabItem, index) => {
        if (tabItem.name === tab.name) {
          let selectTab = tabs[index];
          if (selectTab) {
            this.activeName = selectTab.name;
            this.selectConnectionItem = selectTab.connectionItem;
          }
        }
      });
    },
  }
}
</script>

<style>

.tab .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0 !important;
}

.tab .el-tabs__item {
  margin-right: 3px;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  border: 2px solid #ffffff;
  background: #e5e5e5;
  color: #000000;
  padding: 0 40px;
}

.tab .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
  padding-left: 40px;
  padding-right: 40px;
}

.tab .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
  padding-left: 40px;
  padding-right: 40px;
}

.tab .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2) {
  padding-left: 40px;
  padding-right: 40px;
}

.tab .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
  padding-left: 40px;
  padding-right: 40px;
}

.tab .el-tabs--card > .el-tabs__header .el-tabs__item .el-icon-close {
  width: 14px;
  right: -30px;
}

.tab .manage .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-top: 1px solid #eee !important;
  border-left: 1px solid #eee !important;
  border-right: 1px solid #eee !important;
}

.tab .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 0;
  border-top: 1px solid rgb(255, 255, 255, 0);
  border-left: 1px solid rgb(255, 255, 255, 0) !important;
  border-right: 1px solid rgb(255, 255, 255, 0);
}

/*选中标签标签的颜色 */
.tab .el-tabs__item.is-active {
  color: #000;
  background: #ffffff;
  border-top: 1px solid rgb(255, 255, 255, 0);
  border-left: 1px solid rgb(255, 255, 255, 0) !important;
  border-right: 1px solid rgb(255, 255, 255, 0);
}

/*鼠标悬浮标签颜色*/
.tab .el-tabs__item:hover {
  color: #000;
  background: #fff;
  border-top: 1px solid rgb(255, 255, 255, 0);
  border-left: 1px solid rgb(255, 255, 255, 0) !important;
  border-right: 1px solid rgb(255, 255, 255, 0);
}

/*Pane背景颜色*/
.tab .el-tabs__nav-scroll {
  background: linear-gradient(to right, #C430C6, #1AB5FB);
}

body {
  margin: 0 !important;
}
</style>